<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>OpenLayers v8.2.0 API - Module: ol/source/Raster</title>
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
        crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
    <link rel="stylesheet" type="text/css" href="styles/carbon.css">
    <link rel="stylesheet" type="text/css" href="/theme/ol.css">
    <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
    <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
        <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
                alt="">&nbsp;OpenLayers</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
            aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- menu items that get hidden below 768px width -->
        <nav class="collapse navbar-collapse" id="olmenu">
            <ul class="nav navbar-nav ms-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
                        <a class="dropdown-item" href="/doc/">Docs</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="/doc/quickstart.html"><i
                                class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
                        <a class="dropdown-item" href="/doc/faq.html"><i
                                class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
                        <a class="dropdown-item" href="/doc/tutorials/"><i
                                class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i
                                class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a>
                    </div>
                </li>
                <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button"
                        data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-sitemap me-1"></i>API
                    </a>
                    <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
                        <a class="dropdown-item" href="/en/latest/apidoc/"><i
                                class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
                            (latest)</a </div>
                </li>
            </ul>
        </nav>
    </header>

    <div class="container-fluid">
        <div id="wrap" class="row">
            <div class="navigation col-md-4 col-lg-3">
                <div class="search-wrapper">
                    <div class="search">
                        <input id="search" type="text" autocomplete="off" class="form-control input-sm"
                            placeholder="Search Documentation">
                    </div>
                </div>
                <div class="navigation-list-wrapper">
                    <ul class="navigation-list search-empty">
                        <li class="item item-module toggle-manual toggle-manual-show"
                            data-longname="module:ol/source/Raster" data-name="ol/source/raster">
                            <span class="title toggle">
                                <span class="fa fa-plus me-2 mt-1"></span>
                                <span><a href="module-ol_source_Raster.html">ol​/source​/Raster</a></span>
                            </span>
                            <div class="member-list" data-type="typedefs">
                                <span class="subtitle">Typedefs</span>
                                <ul>
                                    <li data-name="fauxmessageevent"><a
                                            href="module-ol_source_Raster.html#~FauxMessageEvent">FauxMessageEvent</a>
                                    <li data-name="job"><a href="module-ol_source_Raster.html#~Job">Job</a>
                                    <li data-name="jobcallback"><a
                                            href="module-ol_source_Raster.html#~JobCallback">JobCallback</a>
                                    <li data-name="miniondata"><a
                                            href="module-ol_source_Raster.html#~MinionData">MinionData</a>
                                    <li data-name="operation"><a
                                            href="module-ol_source_Raster.html#~Operation">Operation</a>
                                    <li data-name="options"><a href="module-ol_source_Raster.html#~Options">Options</a>
                                    <li data-name="processoroptions"><a
                                            href="module-ol_source_Raster.html#~ProcessorOptions">ProcessorOptions</a>
                                    <li data-name="rasteroperationtype"><a
                                            href="module-ol_source_Raster.html#~RasterOperationType">RasterOperationType</a>
                                    <li data-name="rastersourceeventtypes"><a
                                            href="module-ol_source_Raster.html#~RasterSourceEventTypes">RasterSourceEventTypes</a>
                                </ul>
                            </div>
                        <li class="loading">Loading …
                    </ul>
                </div>
            </div>

            <div class="main col-md-8 col-lg-9">
                <h1 class="page-title" data-filename="module-ol_source_Raster.html">Module: ol/source/Raster</h1>
                <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
                    <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
                        aria-label="Close"></button>
                    This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a
                        id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
                </div>




                <section class="content">

                    <header>
                        <h2 class="my-3">ol/source/Raster
                        </h2>
                        <br>




                        <div class="row p-3 ">
                            <!-- <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                                <script async type="text/javascript"
                                    src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                                    id="_carbonads_js"></script>
                            </div> -->

                        </div>
                    </header>

                    <article>
                        <div class="container-overview">






                            <dl class="details">





















                            </dl>




                        </div>










                        <h3 class="subsection-title">Classes</h3>

                        <dl>
                            <dt><a href="module-ol_source_Raster.RasterSourceEvent.html">RasterSourceEvent</a></dt>
                            <dd></dd>

                            <dt><a href="module-ol_source_Raster-RasterSource.html">RasterSource</a></dt>
                            <dd></dd>
                        </dl>











                        <h3 class="subsection-title">Type Definitions</h3>

                        <dl>

                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~FauxMessageEvent">
                                    </div>
                                    <h4 class="name">
                                        FauxMessageEvent<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>data</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Message data.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Job">
                                    </div>
                                    <h4 class="name">
                                        Job<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>meta</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Job metadata.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>inputs</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;ImageData></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Array of input data.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>callback</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_Raster.html#~JobCallback">JobCallback</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Called when the job is complete.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~JobCallback">
                                    </div>
                                    <h4 class="name">
                                        JobCallback<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Raster.js">source/Raster.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Raster.js#L190">line
                                            190</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">














                                <dl class="details">





















                                </dl>













                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~MinionData">
                                    </div>
                                    <h4 class="name">
                                        MinionData<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>buffers</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;ArrayBuffer></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Array of buffers.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>meta</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Operation metadata.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>imageOps</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>The operation is an image operation.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>width</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>The width of the image.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>height</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>The height of the image.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">

                                <div class="nameContainer">
                                    <div class="anchor" id="~Operation">
                                    </div>
                                    <h4 class="name">
                                        Operation<span class="signature">()</span>



                                    </h4>

                                    <div class="tag-source">
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Raster.js">source/Raster.js</a>,
                                        <a
                                            href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/source/Raster.js#L410">line
                                            410</a>
                                    </div>

                                </div>


                            </dt>
                            <dd class="">




                                <div class="description">
                                    <p>A function that takes an array of input data, performs some operation, and
                                        returns an array of output data.
                                        For <code>pixel</code> type operations, the function will be called with an
                                        array of
                                        pixels, where each pixel is an array of four numbers (<code>[r, g, b, a]</code>)
                                        in the
                                        range of 0 - 255. It should return a single pixel array.
                                        For <code>'image'</code> type operations, functions will be called with an array
                                        of
                                        <a
                                            href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData</a>
                                        and should return a single
                                        <a
                                            href="https://developer.mozilla.org/en-US/docs/Web/API/ImageData">ImageData</a>.
                                        The operations
                                        are called with a second &quot;data&quot; argument, which can be used for
                                        storage. The
                                        data object is accessible from raster events, where it can be initialized in
                                        &quot;beforeoperations&quot; and accessed again in &quot;afteroperations&quot;.
                                    </p>
                                </div>











                                <dl class="details">





















                                </dl>













                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~Options">
                                    </div>
                                    <h4 class="name">
                                        Options<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>sources</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;(<a
                                                                href="module-ol_source_Source-Source.html">module:ol/source/Source~Source</a>|<a
                                                                href="module-ol_layer_Layer-Layer.html">module:ol/layer/Layer~Layer</a>)></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Input
                                                            sources or layers. For vector data, use an VectorImage
                                                            layer.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>operation</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_Raster.html#~Operation">Operation</a></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Raster operation.
                                                            The operation will be called with data from input sources
                                                            and the output will be assigned to the raster source.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>lib</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Functions that will be made available to operations run in a
                                                            worker.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>threads</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>By default, operations will be run in a single worker thread.
                                                            To avoid using workers altogether, set
                                                            <code>threads: 0</code>. For pixel operations, operations
                                                            can
                                                            be run in multiple worker threads. Note that there is
                                                            additional overhead in
                                                            transferring data to multiple workers, and that depending on
                                                            the user's
                                                            system, it may not be possible to parallelize the work.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>operationType</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_Raster.html#~RasterOperationType">RasterOperationType</a></span>



                                                        <br>(defaults to 'pixel')


                                                    </td>

                                                    <td class="description last">
                                                        <p>Operation type.
                                                            Supported values are <code>'pixel'</code> and
                                                            <code>'image'</code>. By default,
                                                            <code>'pixel'</code> operations are assumed, and operations
                                                            will be called with an
                                                            array of pixels from input sources. If set to
                                                            <code>'image'</code>, operations will
                                                            be called with an array of ImageData objects from input
                                                            sources.
                                                        </p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>resolutions</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Array.&lt;number></span>
                                                        |

                                                        <span class="param-type">null</span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Resolutions. If specified, raster operations will only
                                                            be run at the given resolutions. By default, the resolutions
                                                            of the first source with resolutions
                                                            specified will be used, if any. Set to <code>null</code> to
                                                            use any view resolution instead.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~ProcessorOptions">
                                    </div>
                                    <h4 class="name">
                                        ProcessorOptions<span class="type-signature type object">{Object}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">


                                    <h5 class="subsection-title">Properties:</h5>

                                    <dl>

                                        <table class="props">
                                            <thead>
                                                <tr>

                                                    <th>Name</th>


                                                    <th>Type</th>

                                                    <th class="last">Description</th>
                                                </tr>
                                            </thead>

                                            <tbody>


                                                <tr>

                                                    <td class="name"><code>threads</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>Number of workers to spawn.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>operation</code></td>


                                                    <td class="type">


                                                        <span class="param-type"><a
                                                                href="module-ol_source_Raster.html#~Operation">Operation</a></span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>The operation.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>lib</code></td>


                                                    <td class="type">


                                                        <span class="param-type">Object.&lt;string, function()></span>

                                                        | undefined


                                                    </td>

                                                    <td class="description last">
                                                        <p>Functions that will be made available to operations run in a
                                                            worker.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>queue</code></td>


                                                    <td class="type">


                                                        <span class="param-type">number</span>




                                                    </td>

                                                    <td class="description last">
                                                        <p>The number of queued jobs to allow.</p>

                                                    </td>
                                                </tr>



                                                <tr>

                                                    <td class="name"><code>imageOps</code></td>


                                                    <td class="type">


                                                        <span class="param-type">boolean</span>



                                                        <br>(defaults to false)


                                                    </td>

                                                    <td class="description last">
                                                        <p>Pass all the image data to the operation instead of a single
                                                            pixel.</p>

                                                    </td>
                                                </tr>


                                            </tbody>
                                        </table>
                                    </dl>






















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~RasterOperationType">
                                    </div>
                                    <h4 class="name">
                                        RasterOperationType<span class="type-signature type 'pixel'">{'pixel'}</span>
                                        <span class="type-signature type 'image'">{'image'}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">

                                <div class="description">
                                    <p>Raster operation type. Supported values are <code>'pixel'</code> and
                                        <code>'image'</code>.
                                    </p>
                                </div>



                                <dl class="details">





















                                </dl>



                            </dd>



                            <dt class="">
                                <div class="nameContainer">
                                    <div class="anchor" id="~RasterSourceEventTypes">
                                    </div>
                                    <h4 class="name">
                                        RasterSourceEventTypes<span
                                            class="type-signature type module:ol/source/image~imagesourceeventtypes">{<a
                                                href="module-ol_source_Image.html#~ImageSourceEventTypes">ImageSourceEventTypes</a>}</span>
                                        <span class="type-signature type 'beforeoperations'">{'beforeoperations'}</span>
                                        <span class="type-signature type 'afteroperations'">{'afteroperations'}</span>


                                    </h4>
                                </div>

                            </dt>
                            <dd class="">



                                <dl class="details">





















                                </dl>



                            </dd>

                        </dl>



                    </article>

                </section>




            </div>
        </div>
    </div>
    <script>prettyPrint();</script>
    <script src="scripts/linenumber.js"></script>
    <script src="scripts/main.js"></script>
</body>

</html>